import React, { PureComponent } from 'react';
import { Row, Col } from "antd";

import Login from "./login";
import Register from "./register";
import ForgetPassword from "./forgetPassword";
import BG from './bg.jpg';

class Enter extends PureComponent {
  state = {
    operation: 'login'
  };

  componentDidMount() {
    this.setState({
      clientHeight: document.body.clientHeight
    });
  }

  Click = (operation) => {
    console.log(1);
    
    this.setState({
      operation: operation
    })
  }

  render() {
    const { clientHeight } = this.state;
    let component, marginTop;
    switch (this.state.operation) {
      case 'login':
        component = <Login handleClick={(operation) => {this.Click(operation)}}></Login>;
        marginTop = 200;
        break;
      case 'register':
        component = <Register handleClick={(operation) => {this.Click(operation)}}></Register>;
        marginTop = 200;
        break;
      case 'forgetPassword':
        component = <ForgetPassword handleClick={(operation) => {this.Click(operation)}}></ForgetPassword>;
        marginTop = 200;
        break;
      default:
        break;
    }
    return (
      <div style={{background: `url(${BG}) no-repeat`, backgroundSize: '100% 100%', height: clientHeight}}>
      
      <Row justify="center" type="flex">
        <Col span={24} style={{minHeight: marginTop}}></Col>
        <Col span="8" style={{background: '#fff', padding: '60px', borderRadius: '10px'}}>
          {component}
        </Col>
      </Row>
      </div>
    );
  }
}
 
export default Enter;